<template>
  <div class="page">
    <m-header :title="langText&&langText.myincome" :canback="Boolean(1)"></m-header>
    <div class="body">
      <div class="sm_top" v-show="change">
        <p>
          {{langText&&langText.yesterdayearnings}}： （
          {{ data&&data.ysetU + ' '}}{{langText&&langText.usdt}} ,
          {{ data&&data.yestF+' '}}{{langText&&langText.fc}}  ）
        </p>
        <p>
          {{langText&&langText.n7doi}}： （
          {{ data&&data.weekU + ' '}}{{langText&&langText.usdt}} ,
          {{ data&&data.weekF+' '}}{{langText&&langText.fc}}  ）
        </p>
        <p>
          {{langText&&langText.cumulativeincome}}：（  
          {{ data&&data.monthU + ' '}}{{langText&&langText.usdt}} ,
          {{ data&&data.monthF+' '}}{{langText&&langText.fc}}  ）
        </p>
        <p>
          <span class="right" v-if="change" @click="Change">{{langText&&langText.switchstaticrevenue}}</span>
          <span class="right" v-else @click="Change">{{langText&&langText.switchdynamicrevenue}}</span>
        </p>
      </div>
      
      <div class="sm_top" v-show="!change">
        <p>
          {{langText&&langText.yesterdayearnings}}：{{ data2&&data2.yestF+' '}}{{langText&&langText.fc}}  
        </p>
        <p>
          {{langText&&langText.n7doi}}：{{ data2&&data2.weekF+' '}}{{langText&&langText.fc}}
        </p>
        <p>
          <!-- {{langText&&langText.cumulativeincome}}(30{{langText&&langText.day}})： {{ data2&&data2.monthF+' '}}{{langText&&langText.fc}}  -->
          {{langText&&langText.cumulativeincome}}： {{ data2&&data2.monthF+' '}}{{langText&&langText.fc}} 
        </p>
        <p>
          <span class="right" v-if="change" @click="Change">{{langText&&langText.switchstaticrevenue}}</span>
          <span class="right" v-else @click="Change">{{langText&&langText.switchdynamicrevenue}}</span>
        </p>
      </div>

      <div class="sm_bot" v-if="change">
        
        <div class="wrap_top" @click="choicePay">
          <span> {{langText&&langText.incomeoverview}}</span>
          <!-- <i class="iconfont iconwenhao mark"></i> -->
          
          <div class="span_right_icon">
                <p>
                <i class="iconfont iconshang mark"></i>
              </p>
              <p>
                <i class="iconfont iconxia mark"></i>
              </p>
          </div>
          
        </div>

        <table
          class="wrap"
          v-lazy-load="lazyLoad"
        >

          <tr class="list">
            <th>{{langText&&langText.bonustype}}</th>
            <th>{{langText&&langText.bonusnum}}</th>
            <th>{{langText&&langText.nownum}}</th>
            <th>{{langText&&langText.time}}</th>
          </tr>
          <tr class="list" v-for="(item,index) in data.result" :key="index">
            <td>{{item.project}}</td>
            <td>{{item.netincome}} {{item.currency}}</td>
            <td>{{item.after_changed_balance}} {{item.currency}}</td>
            <td>{{item.date}}</td>
          </tr>
        </table>
      </div>

      
      <div class="sm_bot" v-else>
        
        <div class="wrap_top">
          <span> {{langText&&langText.incomeoverview}}</span>
          <div class="span_right_icon" ></div>
        </div>

        <ul class="wrap_ul" v-lazy-load="lazyLoad">
          <li v-for="(item,index) in data2.result" :key="index" class="list_li">
            <div class="list_left">{{item.name_cn}}</div>
            <div class="list_right">
              <p>+{{item.num}} {{langText&&langText.fc}}</p>
              <p>{{langText&&langText.total}}： {{item.total_num}}{{langText&&langText.fc}}</p>
              <!-- <p>{{formatDate(item.createtime)}}</p> -->
              <p>{{item.date}}</p>
            </div>
          </li>
        </ul>

      </div>

    </div>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner } from "@/server/server.js";
import { Load,Util } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
      payPicker:new mui.PopPicker(),
      allTxt:null,
      fc:null,
      usdt:null,
      lock_usdt:null,
      change:false,
      langText:null,
      payList:[
        {
          value: 'all',
          text: '所有'
        },
        {
          value: 'recommend',
          text: '直推奖'
        },
        {
          value: 'power',
          text: '社群算力奖'
        },
        {
          value: 'node',
          text: '节点奖励'
        },
      ],
      page:1,
      type:'all',
      data:{
        ysetU:null,
        ysetF:null,
        weekF:null,
        weekU:null,
        monthU:null,
        monthF:null,
        result:null,
      },
      data2:{

      },
    };
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  created() {
    
  },
  mounted() {
    this.initData();
    this.dynamicIncome(this.type);
    this.staticIncome();
    this.payPicker.setData(this.payList);
  },
  methods: {
    
    initData(){
      this.allTxt = Object.assign({},MyTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))

        this.payList[0].text = this.langText&&this.langText.all;
        this.payList[1].text = this.langText&&this.langText.directaward;
        this.payList[2].text = this.langText&&this.langText.communitycomputingaward;
        this.payList[3].text = this.langText&&this.langText.nodereward;
    },
    formatDate(time){
      return Util.formatDate(time).substring(0,10)
    },
    Change(){
      this.change = !this.change;
    },
    // 静态
    staticIncome(){
      Owner.staticIncome().then(res=>{
        if(res.code==1){
          this.data2 = res.data;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    // 动态
    dynamicIncome(type){
      Owner.dynamicIncome({page:this.page,type}).then(res=>{
        if(res.code==1){
          this.data = res.data;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    choicePay(){
      let _This = this;
      this.isDown = false;
      this.payPicker.show(function(items) {
        console.log(items[0].value)
        _This.page = 1;
        _This.type =  items[0].value;
        _This.dynamicIncome(items[0].value)
      })
    },
    lazyLoad() {
      this.page = this.page + 1;
      if (!this.noMore) {
        this.dynamicIncome(type);
      }
    },
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .sm_top{
    width: 100%;
    height: 300px;
    background-color: #4EB6AD;
    padding: 40px 30px;
    position: relative;
    p{
      font-size:20px;
      font-weight:400;
      color:rgba(255,255,255,1);
      margin-top: 20px;
      &:first-child{ margin-top: 0 }
    }
    .right{
      font-size:28px;
      font-weight:400;
      color:rgba(255,255,255,1);
      border: 1px solid #fff;
      border-radius:10px;
      padding: 5px 15px;
      // position: absolute;
      // right: 60px;
      // top: 60px;
    }
  }
  
  .wrap_top{
    display: flex;
    margin-top: 60px;
    justify-content: space-between;
    background-color: #fff;
    margin-left: 20px;
    width: 710px;
    border-bottom: 1px solid #dddddd;
    height: 88px;
    line-height: 88px;
    border-radius: 10px 10px 0 0;
    position: relative;
    
    .span_right_icon{
      display: inline-block;
      position: absolute;
      right: 30px;
      top: -12px;
      p{ 
        color: #AAAAAA;
        height: 14px;
        &:last-child{
          margin-top: 4px;
        }
        }
      i{
        font-size: 24px;
        line-height: 0;
      }
    }
    >span{
        flex: none;
        color: #4EB6AD;
        font-size:32px;
        margin-left: 26px;
    }
    
    >i{
      flex: none;
      margin-right: 21px;
    }
  }
  .wrap {
    width: 710px;
    margin-left: 20px;
    // border-radius: 10px;
    background-color: #fff;
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    // padding: 0 20px;
    .list {
      // padding: 20px 0;
      // .display-flex();
      height: 66px;
      color: #999999;
      display: flex;
      line-height: 66px;
      &:first-child{ 
        color: #000;
        border-bottom: 1px solid #eee;
      }
      td {
        text-align: center;
        font-size: 24px;
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap
        
      }
      th{
        flex: 1;
        font-weight: 500;
        font-size: 24px;
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap
      }
    }
    .listNo {
      padding: 15px 0;
      text-align: center;
    }
  }
  .wrap_ul{
    width: 710px;
    margin-left: 20px;
    background-color: #fff;
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    padding: 20px 0;
    // .wrap_ul_top{
    //   width: 100%;
    //   height: 20px;
    // }
    .list_li{
      display: flex;
      justify-content: space-between;
      border: 1px solid #ddd;
      border-radius: 10px;
      margin-bottom: 20px;
      padding: 10px 20px;
      .list_left{
        margin-left: 30px;
        margin-top: 40px;
        text-align: center;
        color: #4EB6AD;
        font-size: 30px;
        font-weight: 550;
      }
      .list_right{
        font-style: 26px;
        text-align: center;
        margin-right: 40px;
      }
      p{
        color: #000;
      }
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>